<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
    <!-- HELPERS-->
    <script type="text/javascript" src="Lib/objects-extensions.js"></script>
    <script type="text/javascript" src="Lib/animation.js"></script>
    <!--Actual lib-->
    <script type="text/javascript" src="Lib/common.js"></script>
	<script type="text/javascript" src="Lib/scene.js"></script>
	<!-- END MOSHU'S -->
	
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var IE = false;
    </script>
    <!--[IF IE]>
    <script type="text/javascript">
        IE = true;
    </script>
<![endif]-->
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Tests</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
                <div class="property">
                    No controls available
                </div>
                
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="800" height="500" id="c" style="border:2px solid black;background-image:url('./images/img.jpg')" onmousedown="mouseDown(event)"></canvas>
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Code samples</div>
			<div id="output" style="width:100%; height:90%;overflow-y:scroll;background:white;color:black;">
				<h2>Moshu's tests</h2>
				A bunch of shapes doing their stuff.
                <br /><br /><br /><br />		
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
	    var scene = new Scene2D("c");

	    var onMoving = function (args) {
	        var onBottom = args.y > scene.canvas.height - 100;
	        if (onBottom) return false;
	        else {
	            // check for collisions
	            return true;
	        }
	    }

	    // add a couple of rectangles
	    var rect = new Rectangle2D(100, 100, 50, 50);
	    rect.borderRadius = 5;
	    rect.fill.enabled = true;
	    rect.fill.color = "red";
	    rect.addForce("gravity", 0, 50);
	    rect.velocity.dy = 50;
	    rect.bind("onmoving", onMoving);
	    //rect.addForce("wind", 25, 0);        
	    scene.add(rect);

	    rect = new Rectangle2D(300, 100, 50, 50);
	    rect.borderRadius = 5;
	    rect.velocity.dy = 50;
	    rect.fill.enabled = true;
	    rect.fill.color = "blue";
	    rect.addForce("gravity", 0, 25);
	    //rect.addForce("wind", -25, 0);

	    rect.bind("onmoving", onMoving);

	    scene.add(rect);

	    rect = new Rectangle2D(200, 100, 50, 50);
	    rect.borderRadius = 5;
	    rect.fill.enabled = true;
	    rect.fill.color = "green";
	    rect.velocity.dy = 50;
	    //rect.addForce("gravity", 0, 150);
	    //rect.addForce("wind", -25, 0);
	    rect.bind("onmoving", onMoving);
	    scene.add(rect);

	    scene.invalidate();
	    var i = new Image();
	    img = new Image2D(400, 100, 50, 50, "./images/img1.png");
	    img.velocity.dx = -35;
	    scene.add(img);

	    var line = new Line2D(10, 10, 300, 20);
	    line.addForce("gravity", 0, 50);
	    scene.add(line);

	    var arrow = new Arrow2D(10, 10, 300, 20);
	    arrow.addForce("gravity", 0, 30);
	    scene.add(arrow);

	    var pline = new PolyLine2D([{ x: 10, y: 10 }, { x: 40, y: 10 }, { x: 40, y: 30 }, { x: 10, y: 50 }, { x: 10, y: 10 }])
	    pline.fill.enabled = true;
	    pline.fill.color = "red";
	    scene.add(pline);

	    var ellipse = new Ellipse2D(100, 100, 40, 90);
	    ellipse.addForce("gravity", 0, 30);
	    scene.add(ellipse);

	    var circle = new Circle2D(100, 100, 40);
	    circle.addForce("gravity", 0, 30);
	    scene.add(circle);

	    var composed = new ComposedShape2D(300, 300);
	    var r = new Rectangle2D(0, 0, 30, 30);
	    composed.add(r);
	    var c = new Circle2D(15, 15, 15);
	    composed.add(c);
	    var i = new Image2D(0, 30, 30, 30, "./images/img1.png");
	    composed.add(i);
	    scene.add(composed);
	    composed.velocity.dx = 10;

        // create a rectangle as a polygon
	    var polygon = new Polygon2D([{ x: 300, y: 300 }, { x: 350, y: 300 }, { x: 350, y: 350 }, { x: 300, y: 350 }]);
	    polygon.velocity.dx = -10;
	    scene.add(polygon);

	    var pr = new PolygonRectangle2D(100, 100, 300, 300);
	    pr.velocity.dy = 10;
	    scene.add(pr);

	    var pentagon = new PolygonPentagon2D(400,400,100);
	    pentagon.velocity.dy = -10;
	    //scene.add(pentagon);

	    var hexagon = new PolygonHexagon2D(400, 400, 100);
	    hexagon.velocity.dy = -10;
	    hexagon.fill.enabled = true
	    hexagon.fill.color = "red";
	    scene.add(hexagon);

	</script>
</body>
</html>